<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Load Path Configuration</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #333;
            color: #fff;
            padding: 20px;
        }

        .tree-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #444;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .tree-item span {
            font-size: 16px;
            margin-right: 10px;
        }

        .tree-item button {
            margin-left: auto;
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .tree-item button:hover {
            background-color: #45a049;
        }

        .path-row {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #444;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .path-row label {
            margin-right: 10px;
        }

        .path-row input[type="text"] {
            margin-right: 10px;
            padding: 5px 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #444;
            color: #fff;
            transition: border-color 0.3s;
            width: 400px;
        }

        .path-row input[type="text"]:focus {
            border-color: #4CAF50;
            outline: none;
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
        }

        .path-row button.delete {
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
            background-color: #f44336;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .path-row button.delete:hover {
            background-color: #d32f2f;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="tree-item">
        <span>每次运行地图要注入的文件路径列表</span>
        <button onclick="addNewItem()">+</button>
    </div>
    <div id="VirtualPath"></div>
    <script>
        const vscode = acquireVsCodeApi();

        function addNewItem() {
            vscode.postMessage({ command: 'addNewItem' });
        }

        function updatePaths() {
            const paths = [];
            $('.path-row input[type="text"]').each(function () {
                paths.push($(this).val());
            });
            const jsonPaths = JSON.stringify(paths);
            vscode.postMessage({ command: 'Update', data: jsonPaths });
        }

        function deletePathRow(row) {
            $(row).remove();
            updatePaths();
        }

        window.addEventListener('message', event => {
            switch (event.data.type) {
                case 'addNewItem':
                    const newRow = `
                        <div class="path-row">
                            <label>路径:</label>
                            <input id="input" type="text" value="${event.data.data}" placeholder="请输入路径">
                            <button class="delete" onclick="deletePathRow(this.parentNode)">删除</button>
                        </div>
                    `;
                    $('#VirtualPath').append(newRow);

                    // 使用事件委托，将事件监听器绑定到 #VirtualPath 上
                    $('#VirtualPath').on('input', '.path-row input[type="text"]', updatePaths);
                    updatePaths();
                    break;
            }
        });
    </script>
</body>

</html>